<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	    <meta content="width=device-width, minimum-scale=1,initial-scale=1, maximum-scale=1, user-scalable=1" id="viewport" name="viewport" />
	    <meta content="yes" name="apple-mobile-web-app-capable" />
	    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
	    <meta content="telephone=no" name="format-detection" />
	    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
	    <link rel="stylesheet" type="text/css" href="css/style.css"/>
		<title>校咖汇</title>
	</head>
	<body id="allModel">
		<script src="js/mui.min.js"></script>
		<script src="js/template.js"></script>
		<script id="modelContent" type="text/html">
			<header class="mui-bar mui-bar-footer sent-box">
				<input id="sentInput" type="text" placeholder="aaa">
				<button class="mui-btn sent-btn">发送</button>
			</header><!--输入框-->
			<div class="mui-content mui-scroll-wrapper">
			    <div class="mui-scroll">
			    	<div id="msgBox">
			    		{{each list as value i}} {{if list[i].msgValue==0}}
						<div class="msg-item">
							<img class="msg-user" src={{list[i].route}} alt="" />
							<h1 class="use-name">{{list[i].name}}</h1>
							<div class="msg-content">
								<div class="msg-content-inner">
									{{list[i].msg}}
								</div>
								<div class="msg-content-arrow"></div>
							</div>
							<div class="mui-item-clear"></div>
						</div> {{/if}} {{if list[i].msgValue==1}}
						<time class="current-time">昨天 17:22</time>
						<div class="msg-item msg-item-self">
							<img class="msg-user" src={{list[i].route}} alt="" />
							<div class="msg-content-box">
								<h1 class="use-name">{{list[i].name}}</h1>
								<div class="msg-content">
									<div class="msg-content-inner">
										{{list[i].msg}}
									</div>
									<div class="msg-content-arrow"></div>
								</div>
							</div>
							<div class="mui-item-clear"></div>
						</div>{{/if}}
						{{/each}}
					</div>
			    </div>
			</div>
		</script>
		<script id="msgModel" type="text/html">
			<div class="msg-item msg-item-self">
				<img class="msg-user" src={{route}} alt="" />
				<div class="msg-content-box">
					<h1 class="use-name">{{name}}</h1>
					<div class="msg-content">
						<div class="msg-content-inner">
							
						</div>
						<div class="msg-content-arrow"></div>
					</div>
				</div>
				<div class="mui-item-clear"></div>
			</div>
		</script>
		<script>
			(function($){
				mui.init();
				//页面数据
				myData = {
					list:[{
						route:"img/header_photo01.png",
						name:"王老师",
						msg:"心电图历史心电图历史心电图历史心电图历史心电图历史心电图历史心电图历史",
						msgValue:"0"
					},{
						route:"img/header_photo02.png",
						name:"杨老师",
						msg:"心电图历史心电图历史心电图历史心电图历史心电图历史心电图历史心电图历史",
						msgValue:"1"
					}]
				}
				//发送消息数据
				msgData = {
					route:"img/header_photo02.png",
					name:"小张"
				}
				var data = template('modelContent',myData);
				var sentData = template('msgModel',new Object());
				document.getElementById('allModel').innerHTML = data;
				//禁用滚动条
				document.getElementsByTagName('body')[0].addEventListener('touchmove', function (e) {
				  e.preventDefault();
				});
				
				//自定义滚动条
				var deceleration = mui.os.ios ? 0.003 : 0.0009;
				$('.mui-scroll-wrapper').scroll({
					bounce: true,
					indicators: true, //是否显示滚动条
					deceleration: deceleration
				});
				
				//输入框宽度
				var sentInput_width = window.screen.availWidth-84;
				document.querySelector('.sent-box input').style.width = sentInput_width + "px";
				
				//消息验证
				document.querySelector('.sent-btn').addEventListener('tap',function(){
					var msgBox=document.getElementById('msgBox');
					var sentInput = document.getElementById('sentInput');
					var msgValue = sentInput.value;
					if(sentInput.value ==''){
						alert('发送内容不能为空');
						return false;
					}else{
						var sentData = template('msgModel',msgData);
						msgBox.innerHTML += sentData;
						var msgInner = document.getElementsByClassName('msg-content-inner');
						msgInner[msgInner.length-1].innerHTML = sentInput.value;
					}
				});
			})(mui);
		</script>
	</body>
</html>
